<template>
	<div class="tables">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="频道名称">
				<el-input v-model="formInline.name" placeholder="请输入频道名称" clearable />
			</el-form-item>
			<el-form-item label="频道地址">
				<el-input v-model="formInline.url" placeholder="请输入频道地址" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="onSubmit">搜索</el-button>
				<el-button :icon="Refresh" @click="onreset">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="mb-4">
			<el-button :icon="Plus" type="primary" plain @click="addData">新增</el-button>
			<!-- <el-button :icon="EditPen" type="success" @click="editData" plain>修改</el-button> -->
			<el-popconfirm title="确定删除所选内容吗？" @confirm="deleteElement">
				<template #reference>
					<el-button :icon="Delete" type="danger" plain>删除</el-button>
				</template>
			</el-popconfirm>
			<!-- <el-button :icon="Download" type="warning" plain>导出</el-button> -->
		</div>

		<el-table v-loading="loading" ref="multipleTableRef" :data="tableData" style="width: 100%;margin-top: 20px;"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" :selectable="selectable" width="55" />
			<el-table-column 
				v-for="column in pageData.columns"
				:sortable="column.prop=='channelname'"
				:key="column.prop" 
				:prop="column.prop" 
				:label="column.label" 
				:min-width="column.minWidth"
			>
				<template v-if="column.prop=='enable'" #default="scope">
					<el-switch
					v-model="scope.row.enable" 
					:active-value="1"
					:inactive-value="0"
					@change="enableColumn(scope.row)"
					/>
				</template>
			</el-table-column>
			<el-table-column label="操作" class="notranslate">
				<template #default="scope">
					<el-dropdown>
						<el-button>操作</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="editeRowData(scope.row)">
									<icon name="bianji" />修改
								</el-dropdown-item>
								<el-dropdown-item @click="deleteRowData(scope.row)">
									<icon name="shanchu" />删除
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20]"
				:size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="totals" locale="zh_CN"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>

		<div class="wxdialog">
			<el-dialog v-model="dialogVisible" :title="Tips?'新增':'修改'" width="600" draggable>
				<div>
					<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm"
						label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
						<el-form-item label="所属分类">
							<el-select filterable v-model="ruleForm.classfiyid" @change="getchannel" placeholder="请选择所属分类">
								<el-option v-for="item in classfiy" :key="item.id" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="所属频道">
							<el-select filterable  v-model="ruleForm._id"  placeholder="请选择所属分类">
								<el-option v-for="item in channels" :key="item.id" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="频道图标">
							<el-upload class="avatar-uploader" :action="uploadHost"
								:show-file-list="false" :on-success="handleSuccess"
								:before-upload="beforeUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
						<el-form-item label="源地址">
							<el-input v-model="ruleForm.src" placeholder="请填写源地址" />
						</el-form-item>
						<el-form-item label="是否启用" >
							<el-switch :active-value="1" :inactive-value="0" v-model="ruleForm.enable" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="resetForm(ruleFormRef)">取消</el-button>
						<el-button type="primary" @click="submitForm(ruleFormRef)">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>

	</div>
</template>

<script lang="ts" setup>
	import {ref,reactive, onMounted, getCurrentInstance,computed  } from 'vue';
	import type { TableInstance, ComponentSize, FormInstance, FormRules,UploadProps } from 'element-plus'
	import { Search, Refresh, Plus,Delete,  } from '@element-plus/icons-vue'
	
	const { proxy } = getCurrentInstance();
	const uploadHost = proxy.Uploadhost;
	const formSize = ref<ComponentSize>('default');
	const size = ref<ComponentSize>('default')
	const dialogVisible =ref(false);
	const ruleFormRef = ref(null)
	const ruleForm = reactive({
		_id:'',
		username:'',
		title:'',
		href:"",
		src:'',
		enable:'',
		msg:'',
		state:'',
	})
	const formInline = reactive({
		name: '',
		url:''
	})
	const pageData = reactive({
		columns: [
			{prop: 'username',label: '频道名称',minWidth: '100px'},
			{prop: 'src',label: '所属分类',minWidth: '100px'},
			{prop: 'channelicon',label: '频道图标',minWidth: '100px'},
		]
	});
	
	let tableData= ref([])
	let classfiy= ref();
	let loading =ref(false)
	let currentPage = ref(1)
	let pageSize = ref(10)
	let totals = ref(0)
	let Tips = ref(true)
	let disabled = ref(false)
	const background = ref(true)
	let channels = ref()
	
	onMounted(()=>{
		getclassifys()
		getsouce()
	})
	
	const getsouce = ()=>{
		proxy.$http.post('/tv/getsouce',{currentPage:1,pageSize:pageSize.value}).then((res) => {
			tableData.value = res.data;
			totals.value = res.total
		}).catch((error) => {
			console.log(error)
		})
		
	}
	
	const getclassifys = () => {
		proxy.$http.post('/getclassifys',{currentPage:1,pageSize:100}).then((res) => {
			classfiy.value = res.data;
		}).catch((error) => {
			console.log(error)
		})
	}
	
	const getchannel =()=>{
		ruleForm.channelid=''
		proxy.$http.get('/getchannelbyid',{id:ruleForm.classfiyid}).then((res) => {
			channels.value = res.data
		}).catch((error) => {
			console.log(error)
		})
	}
	
	const imageUrl = ref('')
	
	const handleSuccess: UploadProps['onSuccess'] = (
	  response,
	  uploadFile
	) => {
	  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	  ruleForm.href='https://www.zhaowenjing.com/images/'+response.data[0]
	}
	
	const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
	  
	  return true
	}
	
	const channeliconurl = computed(()=>{
		return (item) => proxy.imgHost + `${item}`;
	})

	const multipleTableRef = ref<TableInstance>()
	const multipleSelection = ref<User[]>([])
	const selectable = (row : User) => ![].includes(row.id)
	const toggleSelection = (rows ?: User[], ignoreSelectable ?: boolean) => {
		if (rows) {
			rows.forEach((row) => {
				multipleTableRef.value!.toggleRowSelection(
					row,
					undefined,
					ignoreSelectable
				)
			})
		} else {
			multipleTableRef.value!.clearSelection()
		}
	}
	const handleSelectionChange = (val : User[]) => {
		multipleSelection.value = val
	}
	const enableColumn = (row)=>{
		
	}
	
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		proxy.$http.post('/tv/getsouce',{currentPage:val,pageSize:pageSize.value}).then((res) => {
			tableData.value = res.data;
			totals.value = res.total
		}).catch((error) => {
			console.log(error)
		})
	}
	
	
	const onSubmit =()=>{
		
	}
	const onreset = ()=>{
		
	}
	const addData = ()=>{
		Tips.value = true
		dialogVisible.value = true
	}
	const deleteElement = () => {
		const newobj = multipleSelection.value.map((item) => {
			return item.id
		})
		proxy.$http.post('/deletechannel', { "id": newobj }).then((res) => {
			getchannel()
		}).catch((error) => {
			console.log(error)
		})
	}
	const editeRowData = () => {
		
	}
	const deleteRowData = () => {
		
	}
	
	const submitForm = (formEl) => {
		console.log("1111111111111",formEl)
		if (!formEl) return
		if (Tips.value) { //新增
			
				const obj = channels.value.find((item) => {
					return item.id == ruleForm._id
				})
				ruleForm.username = obj.name
				console.log(ruleForm)

				proxy.$http.post('/tv/addchannel', ruleForm).then((res) => {
					// getchannel()
					dialogVisible.value = false
					formEl.resetFields()
					
				}).catch((error) => {
					console.log(error)
				})
			} else {
				// const { id } = currentrow;
				// const { name } = ruleForm;
			// 	const obj = classfiy.value.find((item) => {
			// 		return item.id == ruleForm.classfiyid
			// 	})
			// 	const newobj = {
			// 		id:currentrow.id,
			// 		name: ruleForm.name,
			// 		classfiyname: obj.name,
			// 		classfiyid: ruleForm.classfiyid,
			// 		channelicon:ruleForm.channelicon,
			// 	}
			
			// 	proxy.$http.post('/updatechannel', newobj).then((res) => {
			// 		getchannel()
			// 		dialogVisible.value = false
			// 		formEl.resetFields()
			// 	}).catch((error) => {
			// 		console.log(error)
			// 	})
			}

	
	}
	
	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
		dialogVisible.value = false
	}
</script>
<style scoped>
	.tables {
		/* width: 98%; */
		margin: 20px auto;
		padding: 20px;
		box-sizing: border-box;
		background: #fff;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}

	/deep/ .el-table th.el-table__cell {
		background-color: #f8f8f8;
	}

	/deep/ .el-dropdown {
		color: #409eff;
		cursor: pointer;
	}

	/deep/ .el-table .cell {
		line-height: unset;
		/* cursor: pointer; */
	}

	/deep/ .el-popup-parent--hidden {
		width: 100% !important;
	}

	.demo-pagination-block+.demo-pagination-block {
		margin-top: 10px;
	}

	.demo-pagination-block .demonstration {
		margin-bottom: 16px;
	}

	.pagination {
		margin: 20px auto;
		display: flex;
		justify-content: flex-end;
	}
	.avatar-uploader .avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	  background: #ccc;
	}
	
	.avatar-uploader .el-upload {
	  border: 1px dashed var(--el-border-color);
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	  border: 1px dashed;
	}
</style>